<template>
  <div class="article_container">
    <!-- <p>Article---{{ $route.params }}</p> -->
    <!-- 头部导航 -->
    <nav>
      <van-nav-bar title="黑马头条" left-arrow @click-left="onClickLeft" />
    </nav>
    <!-- 头部内容 + 标题 -->
    <header>
      {{ $store.state.aaa }}
      <div class="title">
        <h4>
          {{ articleList.title }}
        </h4>
      </div>
      <div class="content">
        <div class="left">
          <p>
            <img src="@/img/mv.jpg" alt="图片" />
          </p>
          <p>
            <span>{{ articleList.aut_name }}</span>
            <span>{{ articleList.pubdate | format }}</span>
          </p>
        </div>
        <van-button
          v-if="!btnShow"
          icon="plus"
          round
          type="info"
          :loading="followBtnLoading"
          @click="followBtnClick"
          >关注</van-button
        >
        <van-button
          v-else
          round
          type="default"
          :loading="cancelBtnLoading"
          @click="cancelBtnClick"
          >已关注</van-button
        >
      </div>
    </header>
    <!-- 正文 -->
    <main>
      <div v-html="articleList.content" class="main_content"></div>
      <div class="main_art_content_loading" v-if="articleContentLoading">
        <van-loading type="spinner" color="#1989fa" />
      </div>
      <div class="main_art_content" v-if="artContIsShow">
        <h3>以显示全部评论</h3>
      </div>
      <div v-else class="main_artall_content">
        <ul>
          <li v-for="(item, index) in articleContents" :key="index">
            <div class="img">
               <img src="@/img/mv.jpg" alt="图片">
            </div>
            <div class="content">
              <p class="autname">{{ item.aut_name }}</p>
              <p>{{ item.content }}</p>
              <p>
                <span>{{ item.pubdate | format }}</span>
                <span>回复 {{ item.reply_count }}</span>
              </p>
            </div>
              <div class="good_job">
                <van-icon name="good-job-o" />
                <span>赞</span>
              </div>
          </li>
        </ul>
      </div>
    </main>
    <!-- 底部 -->
    <footer>
      <van-tabbar @change="onChange" v-model="active">
        <van-tabbar-item>
          <button @click="contentClick">写评论</button>
        </van-tabbar-item>
        <van-tabbar-item badge="0">
          <template #icon>
            <van-icon name="comment-o" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <template #icon>
            <div @click="starClick">
              <div v-if="isLoaded">
                <van-icon name="star" v-if="starIsShow" />
                <!-- star 为收藏 -->
                <van-icon name="star-o" v-else />
              </div>
              <div v-else>
                <van-button loading type="default" />
              </div>
            </div>
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <!-- <template #icon>
            <van-icon name="good-job-o" />
          </template> -->
          <template #icon>
            <div @click="likingsClick">
              <div v-if="likingsisLoaded">
                <van-icon name="good-job" v-if="likingsIsShow" />
                <!-- good-job 为点赞 -->
                <van-icon name="good-job-o" v-else />
              </div>
              <div v-else>
                <van-button loading type="default" />
              </div>
            </div>
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <template #icon>
            <van-icon name="share" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </footer>
    <!-- 弹出层 -->
    <van-popup v-model="show" position="bottom" :style="popupStyle">
      <div class="message">
        <van-field
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
        />
        <button @click="publishContentClick">发布</button>
      </div>
    </van-popup>
  </div>
</template>

<script>
// 导入时间处理的函数
import format from '@/untils/timeFormat.js'
import {
  apiGetArticleFollow,
  followUser,
  cancleFllow,
  apiCollectArticle,
  apiCancleCollectArticle,
  apiAddLikings,
  apiCancleLikings,
  apiAddComment,
  apiGetContents
} from '@/network/index.js'

import { Toast } from 'vant'
import { mapState } from 'vuex'
export default {
  name: 'Article',
  data () {
    return {
      show: false,
      popupStyle: { height: '20%' },
      active: '',
      // 留言
      message: '',
      // 加载图片的btn
      // 添加
      followBtnLoading: false,
      // 取消
      cancelBtnLoading: false,
      // 文章内容
      articleList: {},
      // 开始获取数据之后哪个按钮显示/隐藏
      btnShow: '',
      // 是否收藏
      starIsShow: '',
      // btn是否加载完成
      isLoaded: true,
      // 是否点赞
      likingsIsShow: '',
      // 点赞加载动画
      likingsisLoaded: true,
      // 评论回复集合
      articleContents: [],
      // 评论加载动画
      articleContentLoading: true,
      // 文章评论列表是否显示
      artContIsShow: false
    }
  },
  created () {
    console.log(this.userInfo)
    this.getArticleFollowVal()
    this.getArticleContents()
  },
  methods: {
    async getArticleFollowVal () {
      try {
        const res = await apiGetArticleFollow(this.$route.params.artId)
        const {
          data: { data: list }
        } = res
        console.log(res)
        this.articleList = list
        this.btnShow = list.is_followed
        this.starIsShow = list.is_collected
        this.likingsIsShow = list.attitude !== -1
        console.log(res)
      } catch (error) {
        console.log(error.response)
      }
    },
    async getFollow () {
      try {
        console.log(this.articleList.aut_id)
        const res = await followUser(this.articleList.aut_id)
        console.log(res, 138)
        // 显示值去取反
        this.btnShow = !this.btnShow
      } catch (error) {
        console.log(error.response)
      }
      // this.btnShow = !this.btnShow
      // console.log(this.btnShow, 'follow')
      // 不管是否成功都要变为false
      this.followBtnLoading = false
    },
    async cancleFllow () {
      try {
        const res = await cancleFllow(this.articleList.aut_id)
        console.log(res, 152)
        // 显示值去取反
        this.btnShow = !this.btnShow
      } catch (error) {
        console.log(error.response)
      }
      // this.btnShow = !this.btnShow
      // console.log(this.btnShow, 'cancle')
      // 不管是否成功都要变为false
      this.cancelBtnLoading = false
    },
    // 收藏文章
    async getCollectArticle () {
      try {
        const res = await apiCollectArticle(this.$route.params.artId)
        this.starIsShow = !this.starIsShow
        Toast.success('收藏成功!')
        console.log(res)
      } catch (error) {
        console.log(error.response)
      }
      this.isLoaded = true
    },
    // 取消收藏文章
    async cancleArticleCollent () {
      try {
        const res = await apiCancleCollectArticle(this.$route.params.artId)
        this.starIsShow = !this.starIsShow
        Toast.success('取消收藏!')
        console.log(res)
      } catch (error) {
        console.log(error.response)
      }
      this.isLoaded = true
    },
    // 点赞
    async AddLikings () {
      try {
        const res = await apiAddLikings(this.$route.params.artId)
        console.log(res)
        this.likingsIsShow = !this.likingsIsShow
        Toast.success('点赞成功!')
      } catch (error) {
        console.log(error.response)
      }
      this.likingsisLoaded = true
    },
    // 取消点赞
    async cancleLikings () {
      try {
        const res = await apiCancleLikings(this.$route.params.artId)
        console.log(res)
        this.likingsIsShow = !this.likingsIsShow
        Toast.success('取消点赞!')
      } catch (error) {
        console.log(error.response)
      }
      this.likingsisLoaded = true
    },
    // 发表评论
    async publishContent () {
      const options = {
        target: this.$route.params.artId,
        content: this.message,
        art_id: this.$route.params.artId

      }
      try {
        const res = await apiAddComment(options)
        console.log(res, 326326)
        const { data: { data: { new_obj: contentInfo } } } = res
        this.articleContents.push(contentInfo)
        Toast.success('添加文章评论成功!')
        this.getArticleContents()
      } catch (error) {
        console.log(error.response)
      }
      this.show = false
    },
    // 获取评论
    async getArticleContents () {
      this.articleContentLoading = true
      try {
        const res = await apiGetContents({
          source: this.$route.params.artId,
          limit: 10
        })
        console.log(res, 337337)
      } catch (error) {
        console.log(error.response)
      }
      this.articleContentLoading = false
      if (this.articleContents.length === 0) {
        this.artContIsShow = true
      } else {
        this.artContIsShow = false
      }
    },
    onClickLeft () {
      this.$router.push('/home')
    },
    contentClick () {
      this.show = true
    },
    onChange (active) {
      console.log(active)
    },
    // 按钮点击
    followBtnClick () {
      this.followBtnLoading = true
      const userInfo = JSON.parse(this.userInfo)
      // console.log(userInfo.id, this.articleList.aut_id)
      if (userInfo.id === this.articleList.aut_id) {
        Toast('不能关注自己, Do You Know ?')
        this.followBtnLoading = false
      } else {
        this.getFollow()
      }
    },
    cancelBtnClick () {
      this.cancelBtnLoading = true
      this.cancleFllow()
    },
    // 收藏按钮点击
    starClick () {
      this.isLoaded = false
      if (this.starIsShow) {
        // 取消收藏
        this.cancleArticleCollent()
      } else {
        // 收藏
        this.getCollectArticle()
      }
    },
    // 点赞或者取消点赞
    likingsClick () {
      this.likingsisLoaded = !this.likingsisLoaded
      if (this.likingsIsShow) {
        // 取消点赞
        this.cancleLikings()
      } else {
        // 点赞
        this.AddLikings()
      }
    },
    publishContentClick () {
      console.log(this.articleList)
      this.publishContent()
    }
  },

  filters: {
    format
  },
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less" scoped>
.article_container {
  overflow: hidden;
  padding: 90px 0;
  nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 6;
    .van-nav-bar {
      background-color: #3296fa;
      /deep/.van-icon {
        color: #fff;
      }
    }
    /deep/.van-nav-bar__title.van-ellipsis {
      color: #fff;
    }
  }
  header {
    h4 {
      margin: 40px 20px 20px;
      font-size: 45px;
      word-wrap: break-word;
    }
    .content {
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      /deep/.van-button {
        font-size: 25px;
        height: 50px;
        padding: 0 35px;
      }
      .left {
        display: flex;
        p {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          img {
            width: 80px;
            height: 80px;
            margin-right: 20px;
            border-radius: 50%;
          }
          & > span {
            font-size: 20px;
            &:last-child {
              color: #ccc;
            }
          }
        }
      }
    }
  }
  main {
    .main_content {
      padding: 0 20px;
      text-indent: 2em;
      font-size: 30px;
      line-height: 45px;
    }
    .main_art_content_loading {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .main_art_content {
      h3 {
        font-weight: 400;
        font-size: 35px;
        text-align: center;
        color: #ccc;
      }
    }
    .main_artall_content {
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 25px;
        .img {
          display: flex;
          align-self: flex-start;
          width: 120px;
          height: 100%;
          justify-content: center;
          align-content: center;
          > img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
          }
        }
        .content {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          margin-left: -120px;
          p {
            &:first-child{
              margin-top: 0;
            }
            margin: 15px;
             font-size: 20px;
            &.autname {
              color: #6180ab;
            }
            span {
              &:last-child {
                display: inline-block;
                width: 100px;
                height: 40px;
                margin: 0 20px;
                text-align: center;
                line-height: 40px;
                border: 1px solid #ccc;
                border-radius: 40px;
              }
            }
          }
        }
        .good_job {
          display: flex;
          justify-content: space-around;
          margin-right: 50px;
          font-size: 35px;
          span {
            margin-left: 15px;
            font-size: 25px;
          }
        }
      }
    }
  }
  footer {
    .van-tabbar-item {
      button {
        width: 240px;
        height: 45px;
        margin-left: 30px;
        padding: 0;
        text-align: center;
        line-height: 45px;
        outline: none;
        color: #ccc;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 20px;
      }
      .van-icon-star-o {
        color: #919191;
      }
      .van-icon-star {
        &::before {
          color: #ffa500;
        }
      }
      .van-icon-good-job-o {
        color: #919191;
      }
      .van-icon-good-job {
        &::before {
          color: #e5645f;
        }
      }
      /deep/.van-button--loading {
        position: relative;
        width: auto;
        margin: 0;
        border: none;
        .van-loading__circular {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  .message {
    display: flex;
    justify-content: center;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    button {
      min-width: 120px;
      font-size: 40px;
      color: #c2d9ee;
      background-color: #fff;
    }
  }
}
</style>
